import React, { useEffect, useState } from "react";
import { Page, useNavigate } from "zmp-ui";
import { useRecoilValue } from "recoil";
import { packageInfoState, userState } from "../../state";
import "./Index.scss";
import util from "../../utils/util";

const PackDetailPage = () => {
  const user = useRecoilValue(userState);
  const pack_info = useRecoilValue(packageInfoState);

  useEffect(() => {
    util.setBarPageView("包裹详情");
    return () => {
      console.log("模拟componentWillUnmount执行销毁后");
    };
  }, []);
  return (
    <Page className="page report">
      <div className="form">
        <div className="form-group flex">
          <div className="form-label">
            <div className="form-label-icon">
              <img src="https://zhuanyun.sllowly.cn/assets/api/images/dzx_img23.png" />
            </div>
            寄送国家
          </div>
          <div className="form-content">
            <div className="form-picker">
              <div className="form-picker-input">
                {pack_info["country"] ? pack_info["country"] : ""}
              </div>
            </div>
          </div>
        </div>
        <div className="form-group flex">
          <div className="form-label">
            <div className="form-label-icon">
              <img src="https://zhuanyun.sllowly.cn/assets/api/images/dzx_img26.png" />
            </div>
            集运仓库
          </div>
          <div className="form-content">
            <div className="form-content">
              <div className="form-picker">
                <div className="form-picker-input">
                  {pack_info["storage"]
                    ? pack_info["storage"]["shop_name"]
                    : "请选择寄送国家"}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="gap"></div>
        <div className="form-group flex">
          <div className="form-label">
            <div className="form-label-icon">
              <img src="https://zhuanyun.sllowly.cn/assets/api/images/dzx_img40.png" />
            </div>
            快递单号
          </div>
          <div className="form-content">
            <div className="form-content">
              <div className="form-picker">
                <div className="form-picker-input">
                  {pack_info["express_num"] ? pack_info["express_num"] : ""}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="form-group flex">
          <div className="form-label">
            <div className="form-label-icon">
              <img src="https://zhuanyun.sllowly.cn/assets/api/images/dzx_img23.png" />
            </div>
            物品品类
          </div>
          <div className="form-content">
            <div className="form-picker">
              <div className="form-picker-input">
                {pack_info["class_name"]
                  ? pack_info["class_name"]
                  : "请选择物品类"}
              </div>
            </div>
          </div>
        </div>
        <div className="form-group flex">
          <div className="form-label">
            <div className="form-label-icon">
              <img src="https://zhuanyun.sllowly.cn/assets/api/images/dzx_img23.png" />
            </div>
            物品价值(￥)
          </div>
          <div className="form-content">
            <div className="form-picker">
              <div className="form-picker-input">
                {pack_info["price"] ? pack_info["price"] : ""}
              </div>
            </div>
          </div>
        </div>
        <div className="form-group" style={{ height: 150 + "px" }}>
          <div className="form-label">
            <div className="form-label-icon">
              <img src="https://zhuanyun.sllowly.cn/assets/api/images/dzx_img41.png" />
            </div>
            商品备注
          </div>
          <div className="form-content">
            <div className="form-picker-input">
              {pack_info["usermark"] ? pack_info["usermark"] : ""}
            </div>
          </div>
        </div>
      </div>
    </Page>
  );
};
export default PackDetailPage;
